iView实现自定义Modal

Modal组件是iView库中较常用的一个，而如何利用render实现一个自定义的Modal在官方wiki中并没有详细说明。我在这里将举例说明：

所谓自定义内容，是指使用一个自定义的组件作为Modal框的内容。在我的实例中，我使用的内容组件包含有两个Input组件，用于实现两个变量的输入。

自定义组件add.vue

<template>
    <Row>
        <div class="wrapper">
            <h4>
                <Icon type="heart"></Icon>&nbsp;save
            </h4>
        </div>
        <div class="wrapper">
            <Input v-model="value1" @on-change="value1Change"></Input>
        </div>
        <div class="wrapper">
            <Input v-model="value2" @on-change="value2Change"></Input>
        </div>
    </Row>
</template>
<script>
    export default {  
        name: 'add',
        data() {
            return {
                value1:'',
                value2:''
            }
        },
        methods:{
            value1Change:function() {
                var obj = this
                this.$emit('value1', obj.value1)
            },
            value2Change:function() {
                var obj = this
                this.$emit('value2', obj.value2)
            }
        } 
    }
</script>

在这个组件中，为两个Input组件分别定义on-change事件的方法。只要value1的值或者value2的值发生变化，就会向父组件emit对应的事件value1和value2。

父组件content.vue

    <template>
        <Button @click="openModal">弹出模态框</Button>
    </template>
    <script>
        import add from './content/add.vue'
        export default {
            data() {
                return {
                   v1:'',
                   v2:''
                }
            },
            components:{
                add
            },
            methods:{
                openModal: function() {
                    this.$Modal.confirm({
                        scrollable:true,
                        okText:'保存',
                        render: (h) => {
                            return h(add, {
                                props: {
                                   
                                },
                                on: {
                                    value1: (value1) => {
                                        this.v1 = value1
                                    },
                                    value2: (value2) => {
                                        this.v2 = value2
                                    }
                                }
                            })
                        },
                        onOk: () => {
                            if (this.v1 == '' || this.v2 == '') {
                                this.$Message.error('信息填写不完整!')
                            }
                            const msg = this.$Message.loading({
                                content: '正在保存..',
                                duration: 0
                            })
                            this.saveLink(msg)
                        }                        
                    })
                }
            } 
        }
    </script>

在父组件中，引入自定义内容组件add(注意：箭头函数中组件为 add 而不是 'add' )，并监听事件value1和value2，及时为data中v1和v2赋值。若在此过程中父组件有需要传递给内容组件的参数，需要在props中填入。

onOk项后定义触发模态框中ok按钮的回调函数。本例中是检查input中输入的值是否为空，并在接口中上传数据。

这样，iView中一个自定义Modal就通过render方法实现了。

最近做了个项目，采用前后分离的模式，而前端使用了iView。作为一个后端程序员，遇见了不少坑,项目上线后我会把我解决的问题总结下，陆续写成文章。既方便自己查看，也希望可以帮助到跟我一样的"小白"。

个人新项目上线后，我会push到我的github。希望大家可以体验下，给我点建议，如果能给个star最好不过了。